<template>
	<view class="songs-list">
		<!-- #ifndef  H5 -->
		<view class="head"></view>
		<!-- #endif -->
		<view class="header">
			<uni-icons type="left" size="22" color="#fff" @click="goBack"></uni-icons>
			<view class="title">歌单</view>
			<uni-icons type="more-filled" size="22" color="#fff"></uni-icons>
		</view>

		<view class="list-hd">
			<view class="hd-info">
				<view class="pic boxShadow">
					<image :src="info.coverImgUrl" mode="aspectFill"></image>
				</view>
				<view class="desc">
					<view class="title">{{ info.name }}</view>
					<view class="user">
						<view class="avatar">
							<image :src="info.creator && info.creator.avatarUrl" mode="aspectFill"></image>
						</view>
						<view class="nickname">{{ info.creator && info.creator.nickname }}</view>
						<uni-icons type="right" size="15" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
			<view class="hd-status">
				<view class="share btn">
					<uni-icons type="redo" size="20" color="#fff"></uni-icons>
					<text>{{ info.shareCount }}</text>
				</view>
				<view class="commit btn">
					<uni-icons type="chat" size="20" color="#fff"></uni-icons>
					<text>评论</text>
				</view>
				<view class="collection btn">
					<uni-icons type="download" size="20" color="#fff"></uni-icons>
					<text>{{ info.subscribedCount }}</text>
				</view>
			</view>
		</view>
		<view class="list-bd">
			<view class="bd-title">
				<uni-icons type="headphones" size="26" color="#d81e06"></uni-icons>
				<text>全部播放</text>
				<text class="count">（{{ info.trackCount }}）</text>
			</view>
			<view class="bd-content">
				<view class="item" @click="showPlayer(song.id)" v-for="(song, index) in list" :key="song.id">
					<view class="num">{{ index + 1 }}</view>
					<view class="song-desc">
						<view class="name">{{ song.name }}</view>
						<view class="author">
							<text v-for="(item, i) in song.ar" :key="item.id">
								{{ item.name }}
								<text v-if="i !== song.ar.length - 1">/</text>
							</text>
							<text>- {{ song.al && song.al.name }}</text>
						</view>
					</view>
					<view class="iconfont icon-more"></view>
				</view>
			</view>
		</view>
		
		<!-- 播放器 -->
		<musicPlayer />
	</view>
</template>

<script setup>
import { apiGetPlayList, apiGetPlayListDetail } from '@/api/songs.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { useStore } from 'vuex'

const list = ref([]);
const info = ref({});
const store = useStore()

const goBack = () => {
	uni.navigateBack();
};

onLoad((option) => {
	// console.log(option.id);
	getPlayList(option.id);
	getPlayListDetail(option.id);
});

const getPlayList = async (id) => {
	const res = await apiGetPlayList(id, 20, 0);
	console.log(res.data.songs);
	list.value = res.data.songs;
};
const getPlayListDetail = async (id) => {
	const res = await apiGetPlayListDetail(id);
	// console.log(res.data.playlist, '----');
	info.value = res.data.playlist;
};

const showPlayer = (id) => {
	// 展示播放器
	// 传递id
	store.commit('changeIsShowPlayer', true)
	store.commit('changeCurrentPlayId', id)
}
</script>

<style lang="scss">
.songs-list {
	// height: 100%;
	// overflow: scroll;
	.head {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		z-index: 9999;
	}
	.header {
		height: 100rpx;
		width: 100%;
		position: fixed;
		// #ifndef H5
		top: 80rpx;
		// #endif
		// #ifdef H5
		top: 0;
		// #endif
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15rpx;
		box-sizing: border-box;
		color: #fff;
		background-color: #588b77;
		z-index: 999;
	}
	.list-hd {
		background: linear-gradient(to bottom, #588b77, #79af9a);
		padding: 100rpx 30rpx 40rpx;
		.hd-info {
			display: flex;
			margin-top: 20rpx;
			.pic {
				width: 160rpx;
				height: 160rpx;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
				image {
					width: 100%;
					height: 100%;
					border-radius: 8px;
				}
			}
			.desc {
				margin-left: 20rpx;
				color: #fff;
				.user {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					.avatar {
						width: 50rpx;
						height: 50rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.nickname {
						margin: 0 10rpx;
						font-size: 24rpx;
					}
				}
			}
		}
		.hd-status {
			display: flex;
			margin-top: 70rpx;
			.btn {
				flex: 1;
				text-align: center;
				background-color: rgba(255, 255, 255, 0.3);
				color: #fff;
				border-radius: 50rpx;
				padding: 10rpx 0;
				font-size: 28rpx;
				margin: 0 10rpx;
			}
		}
	}
	.list-bd {
		background-color: #fff;
		padding: 0 30rpx;
		position: relative;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		top: -20rpx;
		// overflow: hidden;
		.bd-title {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			position: -webkit-sticky;
			position: sticky;
			top: 100rpx;
			background-color: #fff;
			.uni-icons {
				margin-right: 10rpx;
			}
			.count {
				font-size: 20rpx;
			}
		}
		.bd-content {
			.item {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				.num {
					flex: 0 0 50rpx;
					color: #8b8f9b;
				}
				.icon-more {
					flex: 0 0 30rpx;
					color: #8b8f9b;
					font-size: 40rpx;
					font-weight: bold;
				}
				.song-desc {
					flex: 1;
					.name {
						font-size: 28rpx;
					}
					.author {
						font-size: 20rpx;
						color: #8b8f9b;
						margin-top: 4rpx;
					}
				}
			}
		}
	}
}
</style>
